<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="description" content="magnify,jquery plugin,lightbox,viewer,Windows 照片查看器,图片查看器,模态窗,拖拽,缩放,旋转,平移,最大化">
  <title>Magnify</title>
  <!-- Bootstrap -->
  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/balloon-css/0.5.0/balloon.min.css" rel="stylesheet">
  <link href="css/jquery.magnify.css" rel="stylesheet">
  <link href="css/snack.css" rel="stylesheet">
  <link href="css/snack-helper.css" rel="stylesheet">
  <link href="css/docs.css" rel="stylesheet">
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

<body>
  <!--[if lt IE 9]>
      <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->
  <div class="container">
    <div class="header p-20 text-white text-center m-l--15 m-r--15">
      <h1 class="m-t-15 m-b-10">Magnify</h1>
      <p>Magnify is a jQuery plugin to view images just like in Windows.</p>
   
    </div>
    <h2 class="b-b-1 p-b-10 p-t-10 m-t-30" id="examples">Examples</h2>

    <div id="playground">
      <div class="form-inline">
        <select class="form-field" @change="changeTheme">
          <option value="0">default theme</option>
          <option value="1">simple theme</option>
          <option value="2">white theme</option>
        </select>
      </div>
      <div class="image-set m-t-20">
        <a data-magnify="gallery" data-src="" data-caption="Slipping Away by Jerry Fryer" data-group="a" href="https://farm1.staticflickr.com/313/31812080833_297acfbbd9_z.jpg">
          <img src="https://farm1.staticflickr.com/313/31812080833_297acfbbd9_s.jpg" alt="">
        </a>
        <a data-magnify="gallery" data-src="" data-caption="Mi Fuego by albert dros" data-group="a" href="https://farm4.staticflickr.com/3804/33589584740_b0fbdcd4aa_z.jpg">
          <img src="https://farm4.staticflickr.com/3804/33589584740_b0fbdcd4aa_s.jpg" alt="">
        </a>
        <a data-magnify="gallery" data-src="" data-caption="Winter Fairytale by Achim Thomae" data-group="a" href="https://farm1.staticflickr.com/470/31340603494_fb7228020d_z.jpg">
          <img src="https://farm1.staticflickr.com/470/31340603494_fb7228020d_s.jpg" alt="">
        </a>
      </div>
      <div class="boxes default m-t-20">
        <div class="box headed">Options Generator</div>
        <div class="box bodied">
          <div class="row form-horizontal">
            <div class="col-6">
              <div class="form-item">
                <label for="" class="col-4 form-label">
                  draggable
                </label>
                <div class="col-8">
                  <div class="checkbox inline">
                    <input type="checkbox" id="draggable" name="draggable" v-model="options.draggable">
                    <label for="draggable">{{options.draggable}}</label>
                  </div>
                </div>
              </div>
              <div class="form-item">
                <label for="" class="col-4 form-label">
                  resizable
                </label>
                <div class="col-8">
                  <div class="checkbox inline">
                    <input type="checkbox" id="resizable" name="resizable" v-model="options.resizable">
                    <label for="resizable">{{options.resizable}}</label>
                  </div>
                </div>
              </div>
              <div class="form-item">
                <label for="" class="col-4 form-label">
                  movable
                </label>
                <div class="col-8">
                  <div class="checkbox inline">
                    <input type="checkbox" id="movable" name="movable" v-model="options.movable">
                    <label for="movable">{{options.movable}}</label>
                  </div>
                </div>
              </div>
              <div class="form-item">
                <label for="" class="col-4 form-label">
                  keyboard
                </label>
                <div class="col-8">
                  <div class="checkbox inline">
                    <input type="checkbox" id="keyboard" name="keyboard" v-model="options.keyboard">
                    <label for="keyboard">{{options.keyboard}}</label>
                  </div>
                </div>
              </div>
              <div class="form-item">
                <label for="" class="col-4 form-label">
                  title
                </label>
                <div class="col-8">
                  <div class="checkbox inline">
                    <input type="checkbox" id="title" name="title" v-model="options.title">
                    <label for="title">{{options.title}}</label>
                  </div>
                </div>
              </div>
              <div class="form-item">
                <label for="" class="col-4 form-label">
                  multiInstances
                </label>
                <div class="col-8">
                  <div class="checkbox inline">
                    <input type="checkbox" id="multiInstances" name="multiInstances" v-model="options.multiInstances">
                    <label for="multiInstances">{{options.multiInstances}}</label>
                  </div>
                </div>
              </div>
              <div class="form-item">
                <label for="" class="col-4 form-label">
                  fixedContent
                </label>
                <div class="col-8">
                  <div class="checkbox inline">
                    <input type="checkbox" id="fixedContent" name="fixedContent" v-model="options.fixedContent">
                    <label for="fixedContent">{{options.fixedContent}}</label>
                  </div>
                </div>
              </div>
              <div class="form-item">
                <label for="" class="col-4 form-label">
                  fixedModalPos
                </label>
                <div class="col-8">
                  <div class="checkbox inline">
                    <input type="checkbox" id="fixedModalPos" name="fixedModalPos" v-model="options.fixedModalPos">
                    <label for="fixedModalPos">{{options.fixedModalPos}}</label>
                  </div>
                </div>
              </div>
              <div class="form-item">
                <label for="" class="col-4 form-label">
                  fixedModalSize
                </label>
                <div class="col-8">
                  <div class="checkbox inline">
                    <input type="checkbox" id="fixedModalSize" name="fixedModalSize" v-model="options.fixedModalSize">
                    <label for="fixedModalSize">{{options.fixedModalSize}}</label>
                  </div>
                </div>
              </div>
              <div class="form-item">
                <label for="" class="col-4 form-label">
                  modalWidth
                </label>
                <div class="col-8">
                  <input type="number" name="modalWidth" class="form-field" min="0" v-model="options.modalWidth">
                </div>
              </div>
              <div class="form-item">
                <label for="" class="col-4 form-label">
                  modalHeight
                </label>
                <div class="col-8">
                  <input type="number" name="modalHeight" class="form-field" min="0" v-model="options.modalHeight">
                </div>
              </div>
              <div class="form-item">
                <label for="" class="col-4 form-label">
                  gapThreshold
                </label>
                <div class="col-8">
                  <input type="number" name="gapThreshold" class="form-field" min="0" step=".01" v-model="options.gapThreshold">
                </div>
              </div>

              <div class="form-item">
                <label for="" class="col-4 form-label">
                  zIndex
                </label>
                <div class="col-8">
                  <input type="number" name="zIndex" class="form-field" min="1" step="1" v-model="options.zIndex">
                </div>
              </div>
              <div class="form-item">
                <label for="" class="col-4 form-label">
                  dragHandle
                </label>
                <div class="col-8">
                  <input type="text" name="dragHandle" class="form-field" v-model="options.dragHandle">
                </div>
              </div>

            </div>
            <div class="col-6">

              <div class="form-item">
                <label for="" class="col-4 form-label">
                  ratioThreshold
                </label>
                <div class="col-8">
                  <input type="number" name="ratioThreshold" class="form-field" min="0" step=".1" v-model="options.ratioThreshold">
                </div>
              </div>
              <div class="form-item">
                <label for="" class="col-4 form-label">
                  minRatio
                </label>
                <div class="col-8">
                  <input type="number" name="minRatio" class="form-field" min="0.1" step=".1" v-model="options.minRatio">
                </div>
              </div>
              <div class="form-item">
                <label for="" class="col-4 form-label">
                  maxRatio
                </label>
                <div class="col-8">
                  <input type="number" name="maxRatio" class="form-field" min="0" step=".1" v-model="options.maxRatio">
                </div>
              </div>

              <div class="form-item">
                <label for="" class="col-4 form-label">
                  headToolbar
                  <span data-balloon="Pay attention to the order of choice." data-balloon-pos="up">
                    <i class="fa fa-info-circle text-danger"></i>
                  </span>
                </label>
                <div class="col-8">
                  <div class="checkbox inline m-r-10">
                    <input type="checkbox" name="minimize" id="minimize" value="minimize" v-model="options.headToolbar">
                    <label for="minimize">minimize</label>
                  </div>
                  <div class="checkbox inline m-r-10 m-l-0">
                    <input type="checkbox" name="maximize" id="maximize" value="maximize" v-model="options.headToolbar">
                    <label for="maximize">maximize</label>
                  </div>
                  <div class="checkbox inline m-l-0">
                    <input type="checkbox" name="close" id="close" value="close" v-model="options.headToolbar">
                    <label for="close">close</label>
                  </div>
                </div>
              </div>
              <div class="form-item">
                <label for="" class="col-4 form-label">
                  footToolbar
                  <span data-balloon="Pay attention to the order of choice." data-balloon-pos="up">
                    <i class="fa fa-info-circle text-danger"></i>
                  </span>
                </label>
                <div class="col-8">
                  <div class="checkbox inline m-r-10">
                    <input type="checkbox" name="zoomIn" id="zoomIn" value="zoomIn" v-model="options.footToolbar">
                    <label for="zoomIn">zoomIn</label>
                  </div>
                  <div class="checkbox inline m-r-10 m-l-0">
                    <input type="checkbox" name="zoomOut" id="zoomOut" value="zoomOut" v-model="options.footToolbar">
                    <label for="zoomOut">zoomOut</label>
                  </div>
                  <div class="checkbox inline m-r-10 m-l-0">
                    <input type="checkbox" name="prev" id="prev" value="prev" v-model="options.footToolbar">
                    <label for="prev">prev</label>
                  </div>
                  <div class="checkbox inline m-r-10 m-l-0">
                    <input type="checkbox" name="fullscreen" id="fullscreen" value="fullscreen" v-model="options.footToolbar">
                    <label for="fullscreen">fullscreen</label>
                  </div>
                  <div class="checkbox inline m-r-10 m-l-0">
                    <input type="checkbox" name="next" id="next" value="next" v-model="options.footToolbar">
                    <label for="next">next</label>
                  </div>
                  <div class="checkbox inline m-r-10 m-l-0">
                    <input type="checkbox" name="actualSize" id="actualSize" value="actualSize" v-model="options.footToolbar">
                    <label for="actualSize">actualSize</label>
                  </div>
                  <div class="checkbox inline m-r-10 m-l-0">
                    <input type="checkbox" name="rotateRight" id="rotateRight" value="rotateRight" v-model="options.footToolbar">
                    <label for="rotateRight">rotateRight</label>
                  </div>
                  <div class="checkbox inline m-l-0">
                    <input type="checkbox" name="rotateLeft" id="rotateLeft" value="rotateLeft" v-model="options.footToolbar">
                    <label for="rotateLeft">rotateLeft</label>
                  </div>
                </div>
              </div>
              <div class="form-item">
                <label for="" class="col-4 form-label">
                  initMaximized
                </label>
                <div class="col-8">
                  <div class="checkbox inline">
                    <input type="checkbox" id="initMaximized" name="initMaximized" v-model="options.initMaximized">
                    <label for="initMaximized">{{options.initMaximized}}</label>
                  </div>
                </div>
              </div>
              <div class="form-item">
                <label for="" class="col-4 form-label">
                  initAnimation
                </label>
                <div class="col-8">
                  <div class="checkbox inline">
                    <input type="checkbox" id="initAnimation" name="initAnimation" v-model="options.initAnimation">
                    <label for="initAnimation">{{options.initAnimation}}</label>
                  </div>
                </div>
              </div>

              <div class="form-item">
                <label for="" class="col-4 form-label">
                  initEvent
                </label>
                <div class="col-8">
                  <div class="radio inline">
                    <input type="radio" id="click" value="click" v-model="options.initEvent">
                    <label for="click">click</label>
                  </div>
                  <div class="radio inline">
                    <input type="radio" id="dblclick" value="dblclick" v-model="options.initEvent">
                    <label for="dblclick">dblclick</label>
                  </div>
                </div>
              </div>
              <div class="form-item">
                <label for="" class="col-4 form-label">
                  icons
                </label>
                <div class="col-8">
                  {...}
                </div>
              </div>
              <div class="form-item">
                <label for="" class="col-4 form-label">
                  i18n
                </label>
                <div class="col-8">
                  {...}
                </div>
              </div>
              <div class="form-item">
                <label for="" class="col-4 form-label">
                  callbacks
                </label>
                <div class="col-8">
                  {...}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <h2 class="b-b-1 p-b-10 p-t-10 m-t-30" id="usage">Usage</h2>
    <p>The usage of magnify is very simple.</p>
    <h4>1.Include files</h4>
    <pre class="prettyprint">
&lt;link href=&quot;/path/to/magnify.css&quot; rel=&quot;stylesheet&quot;&gt;

&lt;script src=&quot;/path/to/jquery.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;/path/to/jquery.magnify.js&quot;&gt;&lt;/script&gt;
</pre>
    <p>The icons in magnify use font-awesome default, you can customize them in options. If you use default options, you should
      link font-awesome css.</p>
    <pre class="prettyprint">
&lt;link href=&quot;https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css&quot; rel=&quot;stylesheet&quot;&gt;
</pre>
    <h4>2.Html structure</h4>
    <p>The default structure as below:</p>
    <pre class="prettyprint">
&lt;a data-magnify=&quot;gallery&quot; href=&quot;big-1.jpg&quot;&gt;
  &lt;img src=&quot;small-1.jpg&quot;&gt;
&lt;/a&gt;
&lt;a data-magnify=&quot;gallery&quot; href=&quot;big-2.jpg&quot;&gt;
  &lt;img src=&quot;small-2.jpg&quot;&gt;
&lt;/a&gt;
&lt;a data-magnify=&quot;gallery&quot; href=&quot;big-3.jpg&quot;&gt;
  &lt;img src=&quot;small-3.jpg&quot;&gt;
&lt;/a&gt;
</pre>
    <p>or</p>
    <pre class="prettyprint">
&lt;img data-magnify=&quot;gallery&quot; data-src=&quot;big-1.jpg&quot; src=&quot;small-1.jpg&quot;&gt;
&lt;img data-magnify=&quot;gallery&quot; data-src=&quot;big-2.jpg&quot; src=&quot;small-2.jpg&quot;&gt;
&lt;img data-magnify=&quot;gallery&quot; data-src=&quot;big-3.jpg&quot; src=&quot;small-3.jpg&quot;&gt;
</pre>
    <p>All structures above have optional attributes as below:</p>
    <ul>
      <li>Add a
        <code>data-src</code> attribute to link big image if you do not want to use a
        <code>&lt;a&gt;</code> tag. If you use it in a
        <code>&lt;a&gt;</code> tag, it will override the image link in
        <code>href</code> attribute.</li>
      <li>Add a
        <code>data-caption</code> attribute if you want to show a caption. If you are not using this attribute, it will show the image name in the
        url when you set the
        <code>title</code> option
        <code>true</code>.</li>
      <li>Add a
        <code>data-group</code> attribute if you want to set the images in groups.
      </li>
    </ul>
    <h4>3.Call plugin</h4>
    <p>If you add a
      <code>data-magnify</code> attribute, you can write none of js.</p>
    <p>Of course, you can use selector to call the plugin as following code:</p>
    <pre class="prettyprint">
$('[data-magnify=gallery]').magnify(options);
</pre>

    <h2 class="b-b-1 p-b-10 p-t-10 m-t-30" id="options">Options</h2>
    <div class="table-overflow">
      <table class="table bordered">
        <thead>
          <tr>
            <th class="text-uppercase">Name</th>
            <th class="text-uppercase">Type</th>
            <th class="text-uppercase">Default</th>
            <th class="text-uppercase">Description</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>draggable</td>
            <td>boolean</td>
            <td>
              <code>true</code>
            </td>
            <td>If ture, it allow modal dragging</td>
          </tr>
          <tr>
            <td>resizable</td>
            <td>boolean</td>
            <td>
              <code>true</code>
            </td>
            <td>If ture, it allow modal resizing.</td>
          </tr>
          <tr>
            <td>movable</td>
            <td>boolean</td>
            <td>
              <code>true</code>
            </td>
            <td>If ture, it allow image moving.</td>
          </tr>
          <tr>
            <td>keyboard</td>
            <td>boolean</td>
            <td>
              <code>true</code>
            </td>
            <td>If ture, it allow keyboard control. It is similar to Windows viewer.
              <p>
                <kbd>←</kbd> prev image</p>
              <p>
                <kbd>→</kbd> next image</p>
              <p>
                <kbd>+</kbd> zoom in image</p>
              <p>
                <kbd>-</kbd> zoom out image</p>
              <p>
                <kbd>ctrl + alt + 0</kbd> image autual size</p>
              <p>
                <kbd>ctrl + ,</kbd> rotate image left</p>
              <p>
                <kbd>ctrl + .</kbd> rotate image right</p>
            </td>
          </tr>
          <tr>
            <td>title</td>
            <td>boolean</td>
            <td>
              <code>true</code>
            </td>
            <td>If ture, it will show image title on header.</td>
          </tr>
          <tr>
            <td>fixedModalSize</td>
            <td>boolean</td>
            <td>
              <code>false</code>
            </td>
            <td>
              <p>If false, the modal init size will fit to image size.</p>
              <p>If true, the modal init size will be set with
                <code>modalWidth</code> and
                <code>modalHeight</code>.</p>
            </td>
          </tr>
          <tr>
            <td>modalWidth</td>
            <td>number</td>
            <td>
              <code>320</code>
            </td>
            <td>The modal min width.</td>
          </tr>
          <tr>
            <td>modalHeight</td>
            <td>number</td>
            <td>
              <code>320</code>
            </td>
            <td>The modal min height.</td>
          </tr>
          <tr>
            <td>gapThreshold</td>
            <td>number</td>
            <td>
              <code>0.02</code>
            </td>
            <td>There will have a gap if modal too big to beyond the browser.</td>
          </tr>
          <tr>
            <td>ratioThreshold</td>
            <td>number</td>
            <td>
              <code>0.01</code>
            </td>
            <td>Image zoom ratio threshold</td>
          </tr>
          <tr>
            <td>minRatio</td>
            <td>number</td>
            <td>
              <code>0.1</code> (10%)</td>
            <td>The min ratio to show image.</td>
          </tr>
          <tr>
            <td>maxRatio</td>
            <td>number</td>
            <td>
              <code>16</code> (1600%)</td>
            <td>The max ratio to show image.</td>
          </tr>
          <tr>
            <td colspan="4">icons: {</td>
          </tr>
          <tr>
            <td class="p-l-30">minimize</td>
            <td>string</td>
            <td>
              <code>fa fa-window-minimize</code>
            </td>
            <td>The minimize icon class</td>
          </tr>
          <tr>
            <td class="p-l-30">maximize</td>
            <td>string</td>
            <td>
              <code>fa fa-window-maximize</code>
            </td>
            <td>The maximize icon class</td>
          </tr>
          <tr>
            <td class="p-l-30">close</td>
            <td>string</td>
            <td>
              <code>fa fa-close</code>
            </td>
            <td>The close icon class</td>
          </tr>
          <tr>
            <td class="p-l-30">zoomIn</td>
            <td>string</td>
            <td>
              <code>fa fa-search-plus</code>
            </td>
            <td>The zoomIn icon class</td>
          </tr>
          <tr>
            <td class="p-l-30">zoomOut</td>
            <td>string</td>
            <td>
              <code>fa fa-search-minus</code>
            </td>
            <td>The zoomOut icon class</td>
          </tr>
          <tr>
            <td class="p-l-30">prev</td>
            <td>string</td>
            <td>
              <code>fa fa-arrow-left</code>
            </td>
            <td>The prev icon class</td>
          </tr>
          <tr>
            <td class="p-l-30">next</td>
            <td>string</td>
            <td>
              <code>fa fa-arrow-right</code>
            </td>
            <td>The next icon class</td>
          </tr>
          <tr>
            <td class="p-l-30">fullscreen</td>
            <td>string</td>
            <td>
              <code>fa fa-photo</code>
            </td>
            <td>The fullscreen icon class</td>
          </tr>
          <tr>
            <td class="p-l-30">actualSize</td>
            <td>string</td>
            <td>
              <code>fa fa-arrows-alt</code>
            </td>
            <td>The actualSize icon class</td>
          </tr>
          <tr>
            <td class="p-l-30">rotateLeft</td>
            <td>string</td>
            <td>
              <code>fa fa-rotate-left</code>
            </td>
            <td>The rotateLeft icon class</td>
          </tr>
          <tr>
            <td class="p-l-30">rotateRight</td>
            <td>string</td>
            <td>
              <code>fa fa-rotate-right</code>
            </td>
            <td>The rotateRight icon class</td>
          </tr>
          <tr>
            <td class="p-l-30">loader</td>
            <td>string</td>
            <td>
              <code>fa fa-spinner fa-pulse</code>
            </td>
            <td>The loader animation class</td>
          </tr>
          <tr>
            <td colspan="4">}</td>
          </tr>
          <tr>
            <td>headToolbar</td>
            <td>array</td>
            <td>
              <code>[ <br>
                            'maximize', <br>
                            'close'<br>
                            ]</code>
            </td>
            <td>The buttons display in header toolbar.</td>
          </tr>
          <tr>
            <td>footToolbar</td>
            <td>array</td>
            <td>
              <code>[ <br>
                            'zoomIn', <br>
                            'zoomOut', <br>
                            'prev', <br>
                            'fullscreen', <br>
                            'next', <br>
                            'actualSize', <br>
                            'rotateRight' <br>
                            ]</code>
            </td>
            <td>The buttons display in footer toolbar.</td>
          </tr>
          <tr>
            <td>fixedContent</td>
            <td>boolean</td>
            <td>
              <code>true</code>
            </td>
            <td>If true, the content will be fixed.</td>
          </tr>
          <tr>
            <td colspan="4">i18n: {</td>
          </tr>
          <tr>
            <td class="p-l-30">minimize</td>
            <td>string</td>
            <td>
              <code>minimize</code>
            </td>
            <td>The minimize button title text</td>
          </tr>
          <tr>
            <td class="p-l-30">maximize</td>
            <td>string</td>
            <td>
              <code>maximize</code>
            </td>
            <td>The maximize button title text</td>
          </tr>
          <tr>
            <td class="p-l-30">close</td>
            <td>string</td>
            <td>
              <code>close</code>
            </td>
            <td>The close button title text</td>
          </tr>
          <tr>
            <td class="p-l-30">zoomIn</td>
            <td>string</td>
            <td>
              <code>zoom-in</code>
            </td>
            <td>The zoomIn button title text</td>
          </tr>
          <tr>
            <td class="p-l-30">zoomOut</td>
            <td>string</td>
            <td>
              <code>zoom-out</code>
            </td>
            <td>The zoomOut button title text</td>
          </tr>
          <tr>
            <td class="p-l-30">prev</td>
            <td>string</td>
            <td>
              <code>prev</code>
            </td>
            <td>The prev button title text</td>
          </tr>
          <tr>
            <td class="p-l-30">next</td>
            <td>string</td>
            <td>
              <code>next</code>
            </td>
            <td>The next button title text</td>
          </tr>
          <tr>
            <td class="p-l-30">fullscreen</td>
            <td>string</td>
            <td>
              <code>fullscreen</code>
            </td>
            <td>The fullscreen button title text</td>
          </tr>
          <tr>
            <td class="p-l-30">actualSize</td>
            <td>string</td>
            <td>
              <code>actual-size</code>
            </td>
            <td>The actualSize button title text</td>
          </tr>
          <tr>
            <td class="p-l-30">rotateLeft</td>
            <td>string</td>
            <td>
              <code>rotate-left</code>
            </td>
            <td>The rotateLeft button title text</td>
          </tr>
          <tr>
            <td class="p-l-30">rotateRight</td>
            <td>string</td>
            <td>
              <code>rotate-right</code>
            </td>
            <td>The rotateRight button title text</td>
          </tr>
          <tr>
            <td colspan="4">}</td>
          </tr>
          <tr>
            <td>initMaximized</td>
            <td>boolean</td>
            <td>
              <code>false</code>
            </td>
            <td>
              <p>If false, the modal size will be set of image size or what you set.</p>
              <p>If true, the modal size will be set maximized when init.</p>
            </td>
          </tr>
          <tr>
            <td>multiInstances</td>
            <td>boolean</td>
            <td>
              <code>true</code>
            </td>
            <td>
              <p>If true, it allow multiple instances.</p>
            </td>
          </tr>
          <tr>
            <td>initEvent</td>
            <td>string</td>
            <td>
              <code>click</code>
            </td>
            <td>
              <p>The event to init plugin. Another value is
                <code>dblclick</code>.</p>
            </td>
          </tr>
          <tr>
            <td>initAnimation</td>
            <td>boolean</td>
            <td>
              <code>true</code>
            </td>
            <td>
              <p>If false, it will not have animation at plugin's init.</p>
            </td>
          </tr>
          <tr>
            <td>fixedModalPos</td>
            <td>boolean</td>
            <td>
              <code>false</code>
            </td>
            <td>
              <p>If true, the modal position will be fixed when change images.</p>
            </td>
          </tr>
          <tr>
            <td>zIndex</td>
            <td>number</td>
            <td>
              <code>1090</code>
            </td>
            <td>
              <p>The modal style of z-index, it is useful with multiple instances.</p>
            </td>
          </tr>
          <tr>
            <td>dragHandle</td>
            <td>string</td>
            <td>
              <code>' '</code>
            </td>
            <td>
              <p>The handle of draggable.</p>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <h2 class="b-b-1 p-b-10 p-t-10 m-t-30" id="Events">Events</h2>
    <p>
        You can define callbacks in <code>callbacks</code> option. In each callback <code>this</code> is  the <code>Magnify</code> instance. You can also get the element clicked of plugin's init from <code>arguments</code> of Function.
    </p>
    <pre class="prettyprint">
$("[data-magnify=gallery]").magnify({
  callbacks: {
    beforeOpen: function(el){
      // Will fire before modal is opened
    },
    opened: function(el){
      // Will fire after modal is opened
    },
    beforeClose: function(el){
      // Will fire before modal is closed
    },
    closed: function(el){
      // Will fire after modal is closed
    }
  }
});
</pre>

    <h2 class="b-b-1 p-b-10 p-t-10 m-t-30" id="bugs_contributing">Bugs & Contributing</h2>
    <p>Please report bugs via
      <a href="https://github.com/nzbin/magnify">GitHub</a> if you think you might have found a bug or if you have a feature suggestion.
    </p>
    <div class="footer text-center">
      <p>Designed by
        <a href="https://github.com/nzbin/">nzbin</a>. Licensed under the MIT License.</p>
    </div>
  </div>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script>
    window.jQuery || document.write('<script src="js/vendor/jquery-1.12.4.min.js"><\/script>')

  </script>
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdn.bootcss.com/prettify/r298/prettify.min.js"></script>
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="js/jquery.magnify.js"></script>
  <script>
    window.prettyPrint && prettyPrint();

    var defaultOpts = {
      draggable: true,
      resizable: true,
      movable: true,
      keyboard: true,
      title: true,
      modalWidth: 320,
      modalHeight: 320,
      fixedContent: true,
      fixedModalSize: false,
      initMaximized: false,
      gapThreshold: 0.02,
      ratioThreshold: 0.1,
      minRatio: 0.1,
      maxRatio: 16,
      headToolbar: ['maximize', 'close'],
      footToolbar: ['zoomIn', 'zoomOut', 'prev', 'fullscreen', 'next', 'actualSize', 'rotateRight'],
      multiInstances: true,
      initEvent: 'click',
      initAnimation: true,
      fixedModalPos: false,
      zIndex: 1090,
      dragHandle: '',
    };

    var vm = new Vue({
      el: '#playground',
      data: {
        options: defaultOpts
      },
      methods: {
        changeTheme: function (e) {
          if (e.target.value === '0') {
            $('.magnify-theme').remove();
          } else if (e.target.value === '1') {
            $('.magnify-theme').remove();
            $('head').append('<link class="magnify-theme" href="css/magnify-simple-theme.css" rel="stylesheet">');
          } else if (e.target.value === '2') {
            $('.magnify-theme').remove();
            $('head').append('<link class="magnify-theme" href="css/magnify-white-theme.css" rel="stylesheet">');
          }
        }
      },
      updated: function () {
        $('[data-magnify]').magnify(this.options);
      }
    });

  </script>
</body>

</html>